<template>
	<scroll-view scroll-y style="max-height:calc(100vh - 88rpx);width: 100%;">

		<view class="pt10"></view>

		<view :key="yIndex" v-for="(x,yIndex) in list">
			<view class="year-title">
				<text class="pr10">{{x.year}}年度</text>
				<text>推荐奖总收入￥{{x.total.toFixed(2)}}</text>
			</view>

			<u-cell-item :key="index" v-for="(item,index) in x.list" :titleStyle="{fontSize:'30rpx',color:'#222'}"
				:title="item.title" :label="item.created_at | date" :labelStyle="{fontSize:'24rpx',color:'#888'}"
				:value="item.amount" :valueStyle="{fontSize:'32rpx',color:'#222'}" bg-color="#fff"
				@click="$navTo('pages/assets/income/recommendOrder',{year:x.year,month:item.month})">
			</u-cell-item>
		</view>

		<view class="pt15 pb15">
			<u-empty text="亲，暂无相关数据" v-if="list.length==0 && status=='nomore'" icon-size="200" font-size="28"
				margin-top="200"></u-empty>

			<u-loadmore v-else :status="status" />
		</view>
	</scroll-view>
</template>

<script>
	import * as Api from '@/api/assets/income/index.js'
	export default {
		data() {
			return {
				refreshing: false,
				status: 'loadmore',
				list: [],
			}
		},
		methods: {
			// onRefresh() {
			// 	if (this.status == 'loading') return;
			// 	this.status = 'loadmore'
			// 	this.refreshing = true;
			// 	this.getList();
			// },
			async getList() {
				if (this.status == 'loading') return;
				this.status = 'loading';

				const res = await Api.recommendPrizeList()
				if (res.data) {
					let list = res.data;
					list.map(y => {
						y.total = y.list.reduce((total, item) => total + Number(item.amount), 0)
					})
					this.list = list;
					setTimeout(() => {
						this.status = 'nomore';
						this.refreshing = false;
					}, 500)
				}
			}
		},
		mounted() {

		},
		created() {
			this.getList();
		},
	}
</script>

<style lang="scss" scoped>
	.year-title {
		width: 750rpx;
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 28rpx;
		color: #888888;
		padding-left: 32rpx;
	}
</style>